<template>
	<view class="Certification">
		<view :model="ruleForm" :rules="rules" ref="ruleForm" <view class="list">
			<view class="item acea-row row-between-wrapper" prop="levelId">
				<view>身份认证:</view>
				<view class="labelTitle1">
					<radio-group 
						style="display: flex;justify-content: space-between;" @change="radioChange">
						<radio value="1" color="#2B4A39" style="transform:scale(0.5);" checked="true" ></radio>
							<text class="Wstyle">军人</text>
						
						<radio value="2"  color="#2B4A39" style="transform:scale(0.5);"> </radio>
						<text class="Wstyle">退役军人</text>
						<radio value="3"  color="#2B4A39" style="transform:scale(0.5);"></radio> 
						<text class="Wstyle">70岁以上老人</text>
						<radio value="4"  color="#2B4A39" style="transform:scale(0.5);"> </radio>
						<text class="Wstyle">军属</text>
					</radio-group>
				</view>
			</view>

			<!-- 军人证或军保卡-->
			<view label="军人证或军保卡:" 
				v-if="ruleForm.levelId == 1 || ruleForm.levelId == 2 || ruleForm.levelId == 4">
				<view class="item acea-row row-between-wrapper">
				<view class="name" style="padding-left: 30rpx;">
					军人证或军保卡:
				</view>
				<view class="add-con">
					<view class="left">
						<image :src="junRenImage" @click="chooseImage('junRen')"></image>
						<view class="texcent">军人证或军保卡</view>
					</view>
					<view class="right">请上传高清的证件图片，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
				</view>
				
			</view>
			<!-- 军属关系证明  -->

			<view label="军属关系证明"  v-if="ruleForm.levelId == 4">
				<view class="item acea-row row-between-wrapper">
				<view class="name" style="padding-left: 30rpx;">
					军属关系证明:
				</view>
				<view class="add-con">
					<view class="left">
						<image :src="junShuImage" @click="chooseImage('junShu')"></image>
						<view class="texcent">军人证或军保卡</view>
					</view>
					<view class="right">请上传高清的证件图片，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
				</view>
				<!-- <view class="item acea-row row-between-wrapper">
					<view>军属关系证明:</view>
					<view class="pictrue" v-for="(item, uploadPicturesIndex) in uploadPictures"
						:key="uploadPicturesIndex">
						<image :src="item" />
						<text class="iconfont icon-guanbi1 font-color-red"
							@click="uploadPictures.splice(uploadPicturesIndex, 1)"></text>
					</view>
					<view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">
						<text class="iconfont icon-icon25201"></text>
						<view>上传图片</view>
					</view>
					<span class="tip">请确保图片清晰，文字可辨，（图片大小不能超过2M）</span>
				</view> -->
			</view>
			<!-- 身份证正面照 -->
			<view label="身份证正面照"  v-if="ruleForm.levelId == 3">
				<view class="item acea-row row-between-wrapper">
				<view class="name" style="padding-left: 30rpx;">
					身份证正面照：
				</view>
				<view class="add-con">
					<view class="left">
						<image :src="idcardZmImage" @click="chooseImage('idcardZm')"></image>
						<view class="texcent">身份证正面</view>
					</view>
					<view class="right">请上传高清的身份证正面照，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
				</view>
			</view>
			<!-- 身份证反面照 -->
			<view label="身份证反面照"  v-if="ruleForm.levelId == 3">
				<view class="item acea-row row-between-wrapper">
				<view class="name" style="padding-left: 30rpx;">
					身份证反面照：
				</view>
				<view class="add-con">
					<view class="left">
						<image :src="idcardFmImage" @click="chooseImage('idcardFm')"></image>
						<view class="texcent">身份证反面</view>
					</view>
					<view class="right">请上传高清的身份证反面照，支持JPG，JPEG，PNG格式，大小不超过5M</view>
				</view>
				</view>
			</view>
			



			<view class="item acea-row row-between-wrapper" label="华夏远瑞会员卡号" prop="Vip">
				<view>华夏远瑞会员卡号</view>
				<view class="input">
					<input type="text" v-model="ruleForm.vip" placeholder="请输入内容" />
				</view>
			</view>
		</view>

		<view class="modifyBnt" @click="submitForm('ruleForm')">申请认证</view>
		
	</view>
	</view>
</template>

<script>
	// import axios from "axios";
import { VUE_APP_RESOURCES_URL, VUE_APP_API_URL } from '@/config';
import { applyCertification } from "../../api/user.js";


	export default {
		data() {
			return {
				input: '',
				charterImage: '../../static/add-tup.png',
				junRenImage: '../../static/add-tup.png',
				idcardZmImage: '../../static/add-tup.png',
				idcardFmImage: '../../static/add-tup.png',
				junShuImage:'../../static/add-tup.png',
				ruleForm: {
					levelId: "1",
					cardPic: "",
					vip: "",
					idcardZm: '', //身份证正面
					idcardFm: '', //身份证反面
					junRen:'',
					junShu: '',
				},
				merCategoryList: [],
				index: 0,
				RESOURCES_URL: VUE_APP_RESOURCES_URL
			}
		},
		created() {
			// this.uploadApi = axios.defaults.baseURL + "api/upload";
		},
		watch: {
			$yroute(n) {
				this.uploadPictures = [];
			}
		},
		methods: {
			radioChange(evt){
				this.ruleForm.levelId = evt.detail.value
			},
			chooseImage: function(imageType) {
				//选择资质文件图片
				var that = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						if (imageType == 'charter') {
							that.charterImage = res.tempFilePaths[0];
						} else if (imageType == 'idcardZm') {
							that.idcardZmImage = res.tempFilePaths[0];
						} else if (imageType == 'idcardFm') {
							that.idcardFmImage = res.tempFilePaths[0];
						} else if (imageType == 'junShu') {
							that.junShuImage = res.tempFilePaths[0];
						}else if (imageType == 'junRen') {
							that.junRenImage = res.tempFilePaths[0];
						}
			
						//调用上传
						uni.uploadFile({
							url: VUE_APP_API_URL + '/api/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								// 显示上传信息
								console.log(res);
								//	alert(JSON.stringify(res.data));
								var data = JSON.parse(res.data);
								if (imageType == 'charter') {
									that.ruleForm.charter = data.link;
								} else if (imageType == 'idcardZm') {
									that.ruleForm.idcardZm = data.link;
								} else if (imageType == 'idcardFm') {
									that.ruleForm.idcardFm = data.link;
								} else if (imageType == 'junShu') {
									that.ruleForm.junShu = data.link;
								}else if (imageType == 'junRen') {
									that.ruleForm.junRen = data.link;
								}
							}
						});
					}
				});
			},
			submitForm(formName) {
			      // this.$refs[formName].validate(valid => {
			      // if (valid) {
			      //调用接口上传
			      if (this.ruleForm.levelId == 1) {
			        this.ruleForm.cardPic = this.ruleForm.junRen;
			      }
			      if (this.ruleForm.levelId == 2) {
			        this.ruleForm.cardPic =
			          this.ruleForm.junRen + ";" + this.ruleForm.junShu;
			      }
			      if (this.ruleForm.levelId == 3) {
			        this.ruleForm.cardPic =
			          this.ruleForm.idCardZm + ";" + this.ruleForm.idCardFm;
			      }
			      if (this.ruleForm.levelId == 4) {
			        this.ruleForm.cardPic =
			        this.ruleForm.junRen + ";" + this.ruleForm.junShu;
			      }
			      if (!this.ruleForm.cardPic) {
			       uni.showToast({
			       	title: "请上传证件",
			       	icon: 'none'
			       });
			        return false;
			        
			      }
			
			      applyCertification(this.ruleForm).then(res => {
					uni.showToast({
						title: "提交成功，等待审核!",
						icon: 'none'
					});
			      });
			
			      // } else {
			      // 	// alert("error");
			      // 	console.log('error submit!!');
			      // 	return false;
			      // }
			      // });
			    },
				
				
				

		}
	}
</script>

<style>
	.labelTitle1 {
		width:100%;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 0px;
		margin-top: 1.25rem;
		margin-left: 20rpx;
	}

	.levelIdStyle {
		background-color: #fff;
		color: #333333;
	}

	/* .perfor-t {
		display: flex;
		cursor: pointer;
	}

	.tip {
		font-size: 10px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
 */
	.Wstyle {
		display: flex;
		font-size: 24rpx;
		height: 30%;
		margin: auto;
	}
	.add-con {
	margin-top: 30rpx;
	overflow: hidden;
}
.add-con .left {
	float: left;
	text-align: center;
	padding: 10px;
	/* border: 1px solid #ddd; */
}
.add-con .left image {
	width: 200rpx;
	height: 200rpx;
}
.add-con .left .texcent {
	text-align: center;
	font-size: 24rpx;
	color: #333333;
	
}
.add-con .right {
	float: left;
	margin-left: 20rpx;
	font-size: 24rpx;
	color: #999999;
	/* width: 470rpx; */
}
.name {
	/* width: 240rpx; */
	color: #0f0f0f;
}


	/* .pictrue.uploadBnt {
		border: 1px solid #ddd;
	} */
</style>
